<template>
	<div>
		<div class="main">

			<div class="novel" @click='booklist(index)' v-for="(item,index) in datalist" :key="index">

				<div class="novel-content" >
					<img :src="item.url" alt="" width="52px" height="72" />
					<div class="subtime">
						<span class="title">{{item.title}}</span>
						<span class="num">{{item.num}}</span>
					</div>
				</div>

			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				index:'0',
				datalist: [{
						id: 1,
						url: '../../../../static/home/tushu.png',
						title: '言情',
						num: '2125本'
					},
					{
						id: 2,
						url: '../../../../static/home/tushu.png',
						title: '影视文学',
						num: '115本'
					},
					{
						id: 3,
						url: '../../../../static/home/tushu.png',
						title: '青春',
						num: '1215本'
					},
					{
						id: 4,
						url: '../../../../static/home/tushu.png',
						title: '当代小说',
						num: '4115本'
					},
					{
						id: 5,
						url: '../../../../static/home/tushu.png',
						title: '悬疑推理',
						num: '715本'
					},
					{
						id: 6,
						url: '../../../../static/home/tushu.png',
						title: '官场商战',
						num: '515本'
					},
					{
						id: 7,
						url: '../../../../static/home/tushu.png',
						title: '社会乡土',
						num: '615本'
					},
					{
						id: 8,
						url: '../../../../static/home/tushu.png',
						title: '历史',
						num: '5915本'
					},
					{
						id: 9,
						url: '../../../../static/home/tushu.png',
						title: '武侠魔幻',
						num: '45215本'
					},
					{
						id: 10,
						url: '../../../../static/home/tushu.png',
						title: '灵异恐怖',
						num: '53215本'
					},
					{
						id: 11,
						url: '../../../../static/home/tushu.png',
						title: '都市',
						num: '85215本'

					}
				],
				
			}

		},
		methods: {
			booklist(index) {
				this.index = index;
				if(index == 0) {
					this.$router.push({
					path: 'booklist',
					params: {
						index: this.index,
						dataObj: this.msg
					}
				})
				}
				
				
			}
		}
	}
</script>

<style scoped>
	.main {
		width: 92%;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		/*background: sandybrown;*/
		flex-wrap: wrap;
	}
	
	.novel {
		margin-bottom: 20px;
		/*background: skyblue;*/
	}
	
	.novel .novel-content {
		display: flex;
		justify-content: center;
	}
	
	.novel .novel-content img {
		border-radius: 8px;
	}
	
	.novel .subtime {
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-left: 24px;
		width: 64px;
	}
	
	.novel .subtime span {
		width: 64px;
		word-wrap: break-word;
		word-break: normal;
	}
	
	.novel .subtime .title {
		font-size: 15px;
		color: #252525;
		margin-bottom: 10px;
	}
	
	.novel .subtime .num {
		font-size: 14px;
		color: #A1A1A1;
	}
</style>